<template>
    <div>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox">全选
                    </td>
                    <td>商品</td>
                    <td>单价（元）</td>
                    <td>数量</td>
                    <td>小记（元）</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in productData" :key="item.id" v-show="item.count">
                    <td><input type="checkbox"></td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="item.count--">-</button>
                        <input type="text" :value="item.count">
                        <button @click="item.count++">+</button> 
                    </td>
                    <td>{{ item.price*item.count }}</td>
                    <td><button @click="productData.splice(index,1)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <img :src="vuea" alt="">
</template>

<script setup>
import { ref,reactive } from 'vue';
import vuea from '../../assets/vue.svg'
const productData = ref([
    {id:1,name:"苹果",price:10 ,count:2},
    {id:2,name:"香蕉",price:20,count:1},
    {id:3,name:"栗子",price:15,count:5},
    {id:4,name:"李子",price:12,count:10}
])
</script>

<style scoped>

</style>